cascading style sheets guide

Cascade and Inheritance

You are probably wondering what exactly cascades about cascading style sheets. In this lesson we look at the idea of cascading, and a related idea, that of inheritance. Both are important underlying concepts that you will need to grasp in order to work properly with style sheets.

Cascade

A single style sheet associated with one or more web pages is valuable, but in quite a limited way. For small sites, the single style sheet is sufficient, but for larger sites, especially organizational sites managed by more than one person (perhaps several teams who may never communicate) single style sheets don't provide the ability to share common styles, and extend these styles where necessary. This can be a significant limitation.

Cascading style sheets are unlike the style sheets you might have worked with using word processors, because they can be linked together to create a hierarchy of related sheets. This process of linking is called cascading, for reasons we will look at in just a moment. Before we do, let's look at why cascading is such a good idea.

Managing Style at Large Sites

Imagine how the web site for a large organization, say a corporation, might be structured. As sites grow in complexity, individual divisions, departments, and workgroups will become more responsible for their own section of a site. We can already see a potential problem- how do we ensure a consistent look and feel across the whole site?

A dedicated web development team can ensure that a style guide is adhered to. How can we ensure that each workgroup, department, and division also follows the guidelines? Won't the site end up as a dog's breakfast of mish mashed styles?

With traditional HTML, the answer is almost certainly yes. Individual style sheets make life a little better, as all of the style information is concentrated in a single location, easily edited and reviewed. However, we still have the organizational difficulty of ensuring that each style sheet is the same as all the others, that the latest version has been distributed to all and updated.

And what about the logistical nightmare of trying to have each and every style needed by every group included in the one style sheet? Different departments and groups have different needs - the legal department will have different needs from the engineering department, but they will share the basic look and feel of the company's site.

This doesn't look promising. But Cascading Style Sheets in fact provide a mechanism, the cascade, which helps address these very problems.

Cascading style sheets do not have to stand alone. They can import style from one or more other style sheets. Style sheets which import from others are said to cascade from those style sheets.

Here is how we might use the cascading nature of style sheets to help solve the organizational nightmare we described above.

At the top level, the company could have a core style sheet, which defined the basic look and feel for the corporate site. It might include aspects such as text font, color, background color and so on.

Each division would have a divisional style sheet. This does not need to reproduce the core style sheet, simply to add any styles specific to the division. To ensure that this style sheet also carries the core styles, it would import the core style sheet.

We continue down the chain, with each new style sheet adding styles necessary at that level, and importing the style sheet above (no need to import all style sheets, as importing a style sheet imports any style sheets imported by that style sheet.)

Using the process, we create a cascade of style sheets. When a style sheet above this one is changed, these changes cascade automatically into the web pages which are linked to it. Our organizational nightmare is easily managed using the cascading nature of style sheets.

Inheritance

Any HTML page comprises a number of (perhaps a large number of) elements- headings, paragraphs, lists, and so on. What many web developers don't realize (largely because it hasn't been important until style sheets came along) is that every element is contained by another element, and may itself contain other elements. This is technically called the containment hierarchy of a web page.

At the top of the containment hierarchy is the BODY of the page (well, actually, its the HTML element, but browsers treat the BODY as the root of the hierarchy). Every other element on a web page is contained within the BODY.
Similarly, most items will be contained in paragraphs, while paragraphs are contained in the body.

I said above that style sheets made it important to understand this. Why? Well, with cascading style sheets, elements often inherit properties from the elements which contain them (otherwise known as their parent elements). This means that if you give the body of the page certain properties (for example font and color) then every element within the page will inherit these properties- there is no need to set the font and color again for each element, such as list items or paragraphs.

You can always override the inheritance however. By assigning a property to an element, you override the inherited property.

In this part

In this part we learnt about two important and powerful style sheet ideas, cascade, and inheritance.